<template>
  <div class="components-header" ref="componentRef">
    <div class="header-content">
      <div class="header-logo">
        <img src="@/assets/image/logo.png" class="logo-iocn" />
      </div>
      <div
        class="header-flex"
        v-show="(config.isPhone && phoneNavShow) || !config.isPhone"
      >
        <div
          class="header-pages-item"
          :class="route.path === '/' ? 'active' : ''"
          @click="navClick('/')"
        >
          <img
            v-if="active === 'home'"
            src="@/assets/image/nav-home-active.png"
            class="item-iocn"
          />
          <img v-else src="@/assets/image/nav-home.png" class="item-iocn" />
          主页
        </div>
        <div
          class="header-pages-item"
          :class="route.path === '/share' ? 'active' : ''"
          @click="navClick('/share')"
        >
          <img
            v-if="active === 'share'"
            src="@/assets/image/nav-share-active.png"
            class="item-iocn"
          />
          <img v-else src="@/assets/image/nav-share.png" class="item-iocn" />
          分享有礼
        </div>
        <div
          class="header-pages-item"
          :class="route.path === '/recruit' ? 'active' : ''"
          @click="navClick('/recruit')"
        >
          <img
            v-if="active === 'jp'"
            src="@/assets/image/nav-jp-active.png"
            class="item-iocn"
          />
          <img v-else src="@/assets/image/nav-jp.png" class="item-iocn" />
          人才招聘
        </div>
      </div>
      <div class="service-box">
        <div class="icon-box">
          <img src="@/assets/image/service.png" class="service-iocn" />
          <span class="service-text">全国热线</span>
        </div>
        <img src="@/assets/image/service.png" class="phone-service-iocn" />
        <div class="service-tel">400-888-6699</div>
      </div>
      <div class="phone-more" @click="phoneNavShow = !phoneNavShow">
        <img
          src="@/assets/image/header-more.png"
          v-if="!phoneNavShow"
          class="more"
        />
        <img src="@/assets/image/header-close.png" v-else class="more" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import config from "@/config/config";
import router from "@/router";
import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const componentRef = ref<HTMLElement | null>(null);
const phoneNavShow = ref(false);

const active = ref("home");

const navClick = (url: string) => {
  phoneNavShow.value = false;
  router.push(url);
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "@/style/var.less";
@import "./com-header.less";
</style>
